import React from 'react';
import './index.less'
interface WeatherForecast {
    date: string;
    week: string;
    dayweather: string;
    nightweather: string;
    daytemp: string;
    nighttemp: string;
}

interface WeatherData {
    city: string;
    forecasts: WeatherForecast[];
}

interface WeatherDisplayProps {
    weatherData: WeatherData;
    selectedForecast: WeatherForecast | null;
    setSelectedForecast: (forecast: WeatherForecast) => void;
    getFullWeekday: (week: string) => string;
}

const WeatherDisplay: React.FC<WeatherDisplayProps> = ({
    weatherData,
    selectedForecast,
    setSelectedForecast,
    getFullWeekday
}) => {
    const handleCardClick = (forecast: WeatherForecast) => {
        setSelectedForecast(forecast);
    };

    return (
        <div className="weather-container">
            <h2>{weatherData.city}</h2>

            {selectedForecast && (
                <div className="selected-forecast">
                    <h3>{selectedForecast.date} {getFullWeekday(selectedForecast.week)}</h3>
                    <p>白天天气: {selectedForecast.dayweather}</p>
                    <p>夜间天气: {selectedForecast.nightweather}</p>
                    <p>白天温度: {selectedForecast.daytemp}°C</p>
                    <p>夜间温度: {selectedForecast.nighttemp}°C</p>
                    <div className="wind-humidity">
                        <div className="wind-info">西北风 7级</div>
                        <div className="humidity-info">湿度 34%</div>
                    </div>
                </div>
            )}
            <div className="forecast-weather">
                <ul className="forecast-list">
                    {weatherData.forecasts.map((forecast, index) => (
                        <li
                            key={index}
                            className="forecast-card"
                            onClick={() => handleCardClick(forecast)}
                        >
                            <div className="forecast-card-date">
                                {forecast.date} {getFullWeekday(forecast.week)}
                            </div>
                            <div className="forecast-card-temp">
                                {forecast.nighttemp} ~ <span style={{ color: '#f00', paddingLeft: '5px' }}> {forecast.daytemp}°C</span>
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
};

export default WeatherDisplay;
